<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>账单规则管理</title>
 <script type="text/javascript">
 Ext.onReady(function(){

		var tree_data = 
		[
			{id: "card_type", text: "卡类别", leaf: false,children:[
				{id: "card_pro", 
				text: "卡产品",
				children: [{id: "card001", text: "纸质", leaf: true},
				{id: "card002", text: "电子", leaf: true}]
				}	
			]}
		];
		var store = new Ext.data.JsonStore({
			root: 'data',//从返回的json对象data中读取数据
        	totalProperty: 'total',//读取总数的字段
			fields: ["id", "name","version", "cardid", "type", "storpath", "state", "personid","createtime","images"],
  			url:"template!showList.action"
    	});
		
		var model_choose =new Ext.Panel({
			itemId: "model_choose",
			title:"模板选择",
			width: 250,
			height:200,
			layout:"form",
			hideLabels:false,
			defaultType: 'textfield',

			region:'west',
			
			items: [{
              xtype: 'textfield',
              fieldLabel: '模板名称',
              labelStyle: 'font-weight:bold;'
            },{
              xtype: 'textfield',
              fieldLabel: '版本',
              labelStyle: 'font-weight:bold;'
            },{
              xtype: 'textfield',
              fieldLabel: '类型',
              labelStyle: 'font-weight:bold;'
            }],
            buttons:[{text:"选择模板",align:'center', handler: function(){
            
			}}]
		});
		var area ={
			itemId: "area",
			xtype: "grid",
			width: 250,
			height:200,
			stripeRows:true,
			loadMask: true,
			headersDisabled: true,
			store: store,
			region:'north',
			columns:[
	        	{header: "区域", dataIndex: 'id', menuDisabled: true},
	        	{header: "区域名称", dataIndex: 'name', menuDisabled: true}]
		};
		
		var p1 = {
			itemId: "p1",
			xtype: "grid",
			stripeRows:true,
			loadMask: true,
			height:250,
			width:500,
			store: store,
			headersDisabled: true,
			region:'center',
			columns:[
	        	new Ext.grid.RowNumberer({header: "序号", width: 30}),
	        	{header: "模板编号", dataIndex: 'id', menuDisabled: true},
	        	{header: "名称", dataIndex: 'name', menuDisabled: true},
	        	{header: "版本", dataIndex: 'version', menuDisabled: true},
				{header: "开产品", dataIndex: 'cardid', menuDisabled: true},
				{header: "类型", dataIndex: 'type', menuDisabled: true,renderer:function(input){
					if("1"==input)return "纸质";
					else if("2"==input)return "电子";
					else if("3"==input)return "短信";
				}},
				{header: "存储路径", dataIndex: 'storpath', menuDisabled: true},
				{header: "状态", dataIndex: 'state', menuDisabled: true,renderer:function(input){
					if("0"==input)return "停用";
					else if("1"==input)return "启用";
					else if("2"==input)return "审核中";
				}},
				{header: "创建人", dataIndex: 'personid', menuDisabled: true},
				{header: "创建时间", dataIndex: 'createtime', menuDisabled: true}
			],
			bbar: new Ext.PagingToolbar({
				beforePageText:'页',
				afterPageText:'到{0}',
            	pageSize: 10,
            	store: store
        	}),
			buttons:[{text:"新增", handler: function(){
				

			}},{text:"修改", handler: function(){
				var panel = this.ownerCt.ownerCt.ownerCt;
				var p2 = panel.getComponent("p2");
				panel.layout.setActiveItem(1);
				
			}},{text:"删除", handler: function(){
				var p1 = this.ownerCt.ownerCt;
				var record = p1.getSelectionModel().getSelected();
				p1.store.remove(record);
			}}]
		};
			var p3= {
				itemId: "p1",
			xtype: "grid",
			stripeRows:true,
			loadMask: true,
			height:250,
			width:500,
			store: store,
			region:'center',
			columns:[
	        	new Ext.grid.RowNumberer({header: "序号", width: 30}),
	        	{header: "模板编号", dataIndex: 'id'},
	        	{header: "名称", dataIndex: 'name'},
	        	{header: "版本", dataIndex: 'version'},
				{header: "开产品", dataIndex: 'cardid'},
				{header: "类型", dataIndex: 'type',renderer:function(input){
					if("1"==input)return "纸质";
					else if("2"==input)return "电子";
					else if("3"==input)return "短信";
				}},
				{header: "存储路径", dataIndex: 'storpath'},
				{header: "状态", dataIndex: 'state',renderer:function(input){
					if("0"==input)return "停用";
					else if("1"==input)return "启用";
					else if("2"==input)return "审核中";
				}},
				{header: "创建人", dataIndex: 'personid'},
				{header: "创建时间", dataIndex: 'createtime'}
			],
			bbar: new Ext.PagingToolbar({
				beforePageText:'页',
				afterPageText:'到{0}',
            	pageSize: 10,
            	store: store
        	}),
			buttons:[{text:"保存", handler: function(){
				
			}},{text:"取消", handler: function(){
				
				
			}}]
		};
		
		var p4 = {
			itemId: "p4",
			height:550,
			xtype: "panel",
		    bodyStyle:'padding:5px 5px 0',
		    width:700,
			layout:'border',
			region:'center',
			items:[area,p3]
		};	
		var p2 = {
			itemId: "p2",
			height:550,
			xtype: "panel",
		    bodyStyle:'padding:5px 5px 0',
		    width:450,
			layout:'border',
			items:[model_choose,p4]
		};
		
		
		Ext.ux.MyPanel = Ext.extend(Ext.Container, {
			width: 'auto',
			id:"templateList",
			initComponent: function(){
				var me = this;
				me.items = [
					{
						itemId: "mypath", xtype: "component", height: 50,
						html:"aa"
					},{
						itemId: "mycontainer", 
						xtype: "container",
						activeItem:0,//显示第一个容器
						layout:'card',
						items: [p1, p2]
					}
				]
				Ext.ux.MyPanel.superclass.initComponent.call(me);		
			},
			setPath: function(text){
				this.getComponent("mypath").update(text);
			}
		});
		Ext.reg('myPanel', Ext.ux.MyPanel);
		new Ext.Panel({
			width: 'auto',
			height: 700,
			layout: 'border',
			renderTo: "regulate_manager",
			items: [{
					xtype: "billTreePanel",
					root: new Ext.tree.AsyncTreeNode({
						id:'root',//跟节点ID
						expanded : true,//是否展开
						children: tree_data//子节点数据
					}),
					listeners: {
						"click": function(node){
							var my = this.ownerCt.getComponent("myPanel");
							my.setPath(node.attributes.text);
							store.load({params:{cardid:node.id}});
						}
					}
				}, {
					itemId: "myPanel",
					region: 'center',
					xtype: "myPanel",
					autoHeight:true,
					atuoWidth: true
			}]
		});	
	});
	</script>
</head>

<body>
<div id="regulate_manager">
	</div>
</body>
</html>